<template>
    <div>
        <div class="record">
            <div class="record-top">
                <span>
                    <el-icon>
                        <Tickets />
                    </el-icon>
                </span>
                <span>数据列表</span>
            </div>
            <div>
                <el-button @click="dialogVisible = true">添加</el-button>
            </div>
        </div>
    </div>
    <div class="table">
        <el-table border :data="data.data">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="秒杀时段名称" />
            <el-table-column prop="state" label="每日开始时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.startTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="city" label="每日结束时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column label="启用">
                <template #default="scope">
                    <el-switch @click="changeHandle(scope.row)" :active-value="1" :inactive-value="0"
                        v-model="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="edit(scope.row)">
                        编辑</el-button>
                    <el-button link type="primary" @click="del(scope.row.id)">
                        删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="添加时间段" width="40%">
        <el-form-item label="秒杀时间段名称：" prop="count" label-width="200px">
            <div>
                <el-input v-model="state.name" style="width: 100%"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="每日开始时间：" label-width="200px">
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-time-picker v-model="state.startTime" type="date" label="Pick a time" placeholder="请选择时间"
                        style="width: 100%" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="每日结束时间：" label-width="200px">
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker v-model="state.endTime" label="Pick a time" placeholder="请选择时间"
                        style="width: 100%" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="是否启动" label-width="200px">
            <el-radio-group v-model="state.status" class="ml-4">
                <el-radio :label="1" size="large">启用</el-radio>
                <el-radio :label="0" size="large">不启用</el-radio>
            </el-radio-group>
        </el-form-item>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editDel">
                    确定
                </el-button>
            </span>
        </template>

    </el-dialog>
</template>

<script setup lang="ts">
import { user } from "@/api"
import { Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs } from "vue";
import { fomatDate } from "@/utils"
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from 'vue'
const state = reactive<IFlashSessionList>({

    status: 0,
    startTime: "",
    endTime: "",
    name: "",
    id: 0,
    createTime: new Date().toString()

})

const dialogVisible = ref(false)




// 编辑  // 添加
const editDel = () => {
    if (state.id == 0) {
        ElMessageBox.confirm(
            '确定要添加吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                user.flashSessionCreate(state).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        ElMessage({
                            message: res.message,
                            type: res.code === 200 ? "success" : "error",
                        });
                        dialogVisible.value = false
                        getlistFn()
                        state.createTime = ""
                        state.endTime = ""
                        state.id = 0
                        state.name = ""
                        state.startTime = ""
                        state.status = 0
                    }

                }).catch(err => {
                    state.createTime = ""
                    state.endTime = ""
                    state.id = 0
                    state.name = ""
                    state.startTime = ""
                    state.status = 0
                    dialogVisible.value = false
                })

            })

    } else {
        ElMessageBox.confirm(
            '确定要修改吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                user.flashSessionUpdate(state).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        ElMessage({
                            message: res.message,
                            type: res.code === 200 ? "success" : "error",
                        });
                        dialogVisible.value = false
                        getlistFn()
                    }

                })
            }).catch(err => {
                state.createTime = ""
                state.endTime = ""
                state.id = 0
                state.name = ""
                state.startTime = ""
                state.status = 0
                dialogVisible.value = false
            })
    }


}
// 删除
const del = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该时间段?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        user.flashSessionDelete(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
                getlistFn()
            }
        })
    }).catch((err) => {
        ElMessage({
            type: 'info',
            message: '取消修改',
        })
    })

}


const data: { data: IFlashSessionList[] } = reactive({
    data: []
})
// 提取渲染的函数复用
const getlistFn = () => {
    user.flashSessionList().then(res => {
        if (res.code == 200) {
            data.data = res.data
            // console.log(data.data);
        }
    })
}
// 获取列表用于渲染
getlistFn()

// 定义是否启用请求参数
// const state = reactive({
//     id:
// })
// 是否启用 
const changeHandle = (row: IFlashSessionList) => {

    ElMessageBox.confirm(
        '确定要改变状态吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            console.log(row.id, row.status);

            user.flashSessionupdateStatus({ id: row.id, status: row.status }).then(res => {
                console.log(res.data);
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
            row.status = row.status == 1 ? 0 : 1
        })

}

const edit = (val: IFlashSessionList) => {
    state.name = val.name
    state.endTime = val.endTime
    state.startTime = val.startTime
    state.status = val.status
    state.createTime = val.createTime
    state.id = val.id
    dialogVisible.value = true
}



</script>

<style lang="less" scoped>
.record {
    border: 1px solid #c0c4d1;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    padding: 20px;
    color: black;
}

.table {
    margin-top: 20px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>